import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
// 同步加载组件的写法，不建议这么写
// import Home from './pages/Home.vue'
// import Find from './pages/Find.vue'
// import User from './pages/User.vue'
// import Detail from './pages/Detail.vue'

// 建议使用路由懒加载的写法，以节省项目性能
const Home =() => import('@/pages/Home.vue')
const Find =() => import('@/pages/Find.vue')
const Cart =() => import('@/pages/Cart.vue')
const User =() => import('@/pages/User.vue')
const Login =()=> import('@/pages/Login.vue')
const Rsgister = () => import('@/pages/Rsgister.vue')
const Detail =() => import('@/pages/Detail.vue')

// 路由：定义了一组“路径-组件”匹配关系
// 创建路由实例
const router = new VueRouter({
    // 有#的路径，就是Hash路由；没有#的就是history路由。
  // Hash模式唯一的缺点，带个#，比较难看
  // History的优点是url比较正常，它的缺点是部署后刷新视图会报404（解决办法：要求后端做重定向处理）
  mode:'hash',
    routes:[
        // 命名视图：给router-view命名
    // 当访问 '/abc' 路径时，用三个命名视图来分别显示三个组件
    //{ path: '/abc', components: { aaa: A, bbb: B, ccc: C }},

    // 所谓的别名，理解一个更容易记忆的小名
    // 命名路由：给“路径-组件”的匹配关系取个名字
    { path: '/home', alias: '/x', component: Home, name: 'home' },

    // 重定向：当你访问某一个路径时，自动跳转到另一个路径
    // { path: '/', redirect: {name: 'home'}},
    // { path: '/', redirect: '/x' },
        {path:'/',component:Home},
        {path:'/home',component:Home},
        {path:'/find',component:Find},
        {path:'/cart',component:Cart},
        {path:'/user',component:User},
        {path:'/login',component:Login},
        {path:'/resgister',component:Rsgister},
        // 动态路由：冒号后面的id是一个变量，在/detail对应的组件中使用 this.$route.params获取动态id
        // 路由传参：props开启路由传参，并且允许接受参数的那个组件使用props属性来接收
        {path:'/detail/:id',component:Detail,props:true},
        //通配符放最后
        { path: '*', redirect: '/'}
        
    ]
})

//抛出实例
export default router